<html>
<head>
<title>test</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

<script>
	$(document).ready(function() {
		//$("#tags").autocomplete({
		//	source: ["test", "testagain","sprint"]
		//});
		
		//JQuery way to get json
		$("#tags").autocomplete({
			source: function(request, response) {
				$.get('/autoComplete/', request,  function(data) {
					response(data);
				});
			}
		});
		
		
		//ajax way to get json
		$("#words").autocomplete({
			source: function(request, response) {
				$.ajax({
                    url: "/autoComplete/",
                    dataType: "json",
                    data: request,
                    success: function(data) {
                        response(data);
                    },
				});
			}
		});			
		
		
	});
</script>

</head>
<body>
<p>This is a test. {{ gogogo }}</p>
<label id="new">test123</label>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags">
	<label for="words">words:</label>
	<input id="words">
	
</div>

<table>
<tr><td>test</td><td>test1</td></tr>
<tr><td>test2nd</td><td>test12nd</td></tr>
</table>

</body>
</html>